<template>
  <div class="adminpage">
    <div class="top">
      <div class="topbar">
<!--        <div class="topbar-l" :class="{'topbar-l-hover': isreport}" style="margin-right: 260px;" @click="doreport">上报数据</div>-->
        <img src="../images/viruswatcher.png" alt="">
<!--        <div class="topbar-l" :class="{'topbar-l-hover': ismodule}" style="margin-left: 260px;" @click="domodule">调配物资</div>-->
      </div>
    </div>
    <div class="content">

      <!-- 主内容区域 -->
      <div class="main">
        <div class="school-01" :class="{onschool01: ismessage||ismessage01}">
          <div class="school-text">
            <span style="color: red;">隔离人数：{{SchoolA.isolatedPersonnel}}人</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            周边安全等级：<div :class="changeAroundLevelImg(this.SchoolA.aroundLevel)"></div><hr>
            防疫人员剩余：{{SchoolA.preventionWorkers}}人<br />
            口罩：{{SchoolA.mask}}件<br />
            消毒水：{{SchoolA.disinfectant}}件<br />
            防护服：{{SchoolA.suit}}件<br />
            日志：{{SchoolA.log}}
          </div>
          <img class="bg-img" src="../images/bg2.png" alt="">
        </div>
        <img class="palce-img" :src="changeLevelImg(this.SchoolA.selfLevel)" alt=""
             @mouseover="ismessage01 = true"
             @mouseleave="ismessage01 = false"
             style="position: absolute;top: 230px;left: 314px;">
        <div class="school-02" :class="{onschool02: ismessage||ismessage02}">
          <div class="school-text">
            <span style="color: red;">隔离人数：{{SchoolB.isolatedPersonnel}}人</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            周边安全等级：<div :class="changeAroundLevelImg(this.SchoolB.aroundLevel)"></div><hr>
            防疫人员剩余：{{SchoolB.preventionWorkers}}人<br />
            口罩：{{SchoolB.mask}}件<br />
            消毒水：{{SchoolB.disinfectant}}件<br />
            防护服：{{SchoolB.suit}}件<br />
            日志：{{SchoolB.log}}
          </div>
          <img class="bg-img" src="../images/bg3.png" alt="">
        </div>
        <img class="palce-img" :src="changeLevelImg(this.SchoolB.selfLevel)" alt=""
             @mouseover="ismessage02 = true"
             @mouseleave="ismessage02 = false"
             style="position: absolute;top: 216px;left: 926px;">
        <div class="school-03" :class="{onschool03: ismessage||ismessage03}">
          <div class="school-text">
            <span style="color: red;">隔离人数：{{SchoolC.isolatedPersonnel}}人</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            周边安全等级：<div :class="changeAroundLevelImg(this.SchoolC.aroundLevel)"></div><hr>
            防疫人员剩余：{{SchoolC.preventionWorkers}}人<br />
            口罩：{{SchoolC.mask}}件<br />
            消毒水：{{SchoolC.disinfectant}}件<br />
            防护服：{{SchoolC.suit}}件<br />
            日志：{{SchoolC.log}}
          </div>
          <img class="bg-img" src="../images/bg4.png" alt="">
        </div>
        <img class="palce-img" :src="changeLevelImg(this.SchoolC.selfLevel)" alt=""
             @mouseover="ismessage03 = true"
             @mouseleave="ismessage03 = false"
             style="position: absolute;top: 398px;left: 380px;">
        <div class="school-04" :class="{onschool04: ismessage||ismessage04}">
          <div class="school-text">
            <span style="color: red;">隔离人数：{{SchoolD.isolatedPersonnel}}人</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            周边安全等级：<div :class="changeAroundLevelImg(this.SchoolD.aroundLevel)"></div><hr>
            防疫人员剩余：{{SchoolD.preventionWorkers}}人<br />
            口罩：{{SchoolD.mask}}件<br />
            消毒水：{{SchoolD.disinfectant}}件<br />
            防护服：{{SchoolD.suit}}件<br />
            日志：{{SchoolD.log}}
          </div>
          <img class="bg-img" src="../images/bg5.png" alt="">
        </div>
        <img class="palce-img" :src="changeLevelImg(this.SchoolD.selfLevel)" alt=""
             @mouseover="ismessage04 = true"
             @mouseleave="ismessage04 = false"
             style="width: 40px;position: absolute;top: 402px;left: 1006px;">
        <img class="icon-img" :src="iconimg ? this.linkerImg[0].src : this.linkerImg[1].src" alt="" @click="domessage">
        <img class="main-bg" src="../images/bg.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import SQL from "../js/sql.js"
export default {
  name: 'Admin',
  data() {
    return {
      ismodule: false, // 调配物资
      isreport: false, // 数据上报
      ismessage: false, // 窗口显示
      ismessage01: false,
      ismessage02: false,
      ismessage03: false,
      ismessage04: false,
      iconimg: true, // 判断窗口显示图标
      linkerImg: [{ // 切换窗口显示图标
        src: require('../images/on.png')
      }, {
        src: require('../images/off.png')
      }],
      levelImg: [{
        src: require('../images/place1.png')
      }, {
        src: require('../images/place2.png')
      }, {
        src: require('../images/place3.png')
      }],
      // 学校防控相关数据
      preventionWorkersAll: 100,
      maskAll: 50,
      disinfectantAll: 30,
      suitAll: 20,
      School: Array, // TODO: 由数据库传入，页面中由v-for循环生成列表
      SchoolA: {
        schoolName:'浙江传媒学院',
        selfLevel: 1,
        aroundLevel: 1,
        isolatedPersonnel: '',//隔离人数
        preventionWorkers: '',//防疫人员
        mask: '',//口罩
        disinfectant: '',//消毒水
        suit: '',//防护服
        log: '敬畏生命，担当责任，抗疫行动，刻不容缓。'
      },
      SchoolB: {
        schoolName:'杭州职业技术学院',
        selfLevel: 1,
        aroundLevel: 1,
        isolatedPersonnel: '',
        preventionWorkers: '',
        mask: '',
        disinfectant: '',
        suit: '',
        log: '将抗疫进行到底。'
      },
      SchoolC: {
        schoolName:'杭州电子科技大学',
        selfLevel: 1,
        aroundLevel: 1,
        isolatedPersonnel: '',
        preventionWorkers: '',
        mask: '',
        disinfectant: '',
        suit: '',
        log: '疫情期间，抗疫第一。'
      },
      SchoolD: {
        schoolName:'浙江理工大学',
        selfLevel: 1,
        aroundLevel: 1,
        isolatedPersonnel: '',
        preventionWorkers: '',
        mask: '',
        disinfectant: '',
        suit: '',
        log: '团结一心，共同抗疫。',
      },
    }
  },
  created() {
    this.selectAllMaterial()
    this.selectSchoolInformation(this.SchoolA)
    this.selectSchoolInformation(this.SchoolB)
    this.selectSchoolInformation(this.SchoolC)
    this.selectSchoolInformation(this.SchoolD)
    this.islevelA();
    this.islevelB();
    this.islevelC();
    this.islevelD();
  },
  mounted() {
    const that = this
    setInterval(function (){
      that.selectAllMaterial()
      that.selectSchoolInformation(that.SchoolA)
      that.selectSchoolInformation(that.SchoolB)
      that.selectSchoolInformation(that.SchoolC)
      that.selectSchoolInformation(that.SchoolD)
      that.islevelA();
      that.islevelB();
      that.islevelC();
      that.islevelD();
    },5000)
  },

  methods: {
    // 展开和关闭相关窗口
    domodule() {
      if(this.ismodule == false) {
        this.ismodule = true
        this.isreport = false
      } else if(this.ismodule == true) {
        this.ismodule = false
      }
    },
    doreport() {
      if(this.isreport == false) {
        this.isreport = true
        this.ismodule = false
        this.ismessage = false
        this.iconimg = true
      } else if(this.isreport == true) {
        this.isreport = false
      }
    },
    domessage() {
      if(this.ismessage == true) {
        this.ismessage = false
        this.iconimg = true
      } else if(this.ismessage == false) {
        this.ismessage = true
        this.iconimg = false
        this.isreport = false
      }
    },
    // 判断疫情等级后更新图片
    changeLevelImg(level) {
      if(level == 1) {
        return this.levelImg[0].src;
      } else if(level == 2) {
        return this.levelImg[1].src;
      } else if(level == 3) {
        return this.levelImg[2].src;
      }
    },

    // 判断周边疫情等级后更新class
    changeAroundLevelImg(level) {
      if(level == 1) {
        return 'levelGreen';
      } else if(level == 2) {
        return 'levelYellow';
      } else if(level == 3) {
        return 'levelRed';
      }
    },

    reportIsolatedPersonnel(schoolName){
      let num = prompt('请输入更新后的隔离人数:');
      if(num!='' && num!=undefined){
        SQL.getSql().updateInfected(schoolName,num)
      }
    },

    reportAllMaterial(MaName){
      let num = prompt('请输入防疫资源增加或减少的数量:');
      if(num!='' && num!=undefined){
        SQL.getSql().updateAllMaterial(MaName,num)
      }
    },

    reportMaterial(schoolName,MaName){
      let num = prompt('请输入'+schoolName+'防疫资源增加或减少的数量:');
      if(num!='' && num!=undefined){
        SQL.getSql().updateMaterial(schoolName,MaName,num)
      }
    },

    islevelA() {
      // 根据自身隔离人数判断
      if(this.SchoolA.isolatedPersonnel > 10) { // 变成红码并通知隔壁
        this.SchoolA.selfLevel = 3

        this.SchoolB.aroundLevel = 3
        this.SchoolC.aroundLevel = 3
      } else if(this.SchoolA.isolatedPersonnel > 6) { // 变成黄码并通知隔壁
        this.SchoolA.selfLevel = 2

        if(this.SchoolB.aroundLevel < 2) {
          this.SchoolB.aroundLevel = 2
        }
        if(this.SchoolC.aroundLevel < 2) {
          this.SchoolC.aroundLevel = 2
        }
      } else {  // 变成绿码并通知隔壁
        this.SchoolA.selfLevel = 1
      }
    },

    islevelB() {
      // 根据自身隔离人数判断
      if(this.SchoolB.isolatedPersonnel > 10) { // 变成红码并通知隔壁
        this.SchoolB.selfLevel = 3

        this.SchoolA.aroundLevel = 3
        this.SchoolC.aroundLevel = 3
      } else if(this.SchoolB.isolatedPersonnel > 6) { // 变成黄码并通知隔壁
        this.SchoolB.selfLevel = 2

        if(this.SchoolA.aroundLevel < 2) {
          this.SchoolA.aroundLevel = 2
        }
        if(this.SchoolC.aroundLevel < 2) {
          this.SchoolC.aroundLevel = 2
        }
      } else {  // 变成绿码并通知隔壁
        this.SchoolB.selfLevel = 1
      }
    },

    islevelC() {
      // 根据自身隔离人数判断
      if(this.SchoolC.isolatedPersonnel > 10) { // 变成红码并通知隔壁
        this.SchoolC.selfLevel = 3

        this.SchoolA.aroundLevel = 3
        this.SchoolD.aroundLevel = 3
      } else if(this.SchoolC.isolatedPersonnel > 6) { // 变成黄码并通知隔壁
        this.SchoolC.selfLevel = 2

        if(this.SchoolA.aroundLevel < 2) {
          this.SchoolA.aroundLevel = 2
        }
        if(this.SchoolD.aroundLevel < 2) {
          this.SchoolD.aroundLevel = 2
        }
      } else {  // 变成绿码并通知隔壁
        this.SchoolC.selfLevel = 1
      }
    },

    islevelD() {
      // 根据自身隔离人数判断
      if(this.SchoolD.isolatedPersonnel > 10) { // 变成红码并通知隔壁
        this.SchoolD.selfLevel = 3

        this.SchoolB.aroundLevel = 3
        this.SchoolC.aroundLevel = 3
      } else if(this.SchoolD.isolatedPersonnel > 6) { // 变成黄码并通知隔壁
        this.SchoolD.selfLevel = 2

        if(this.SchoolB.aroundLevel < 2) {
          this.SchoolB.aroundLevel = 2
        }
        if(this.SchoolC.aroundLevel < 2) {
          this.SchoolC.aroundLevel = 2
        }
      } else {  // 变成绿码并通知隔壁
        this.SchoolD.selfLevel = 1
      }
    },

    //一次性查询学校所有信息
    async selectSchoolInformation(that){
      that.isolatedPersonnel = await SQL.getSql().selectInfected(that.schoolName);
      that.preventionWorkers = await SQL.getSql().selectMaterial(that.schoolName, '防疫人员');
      that.mask = await SQL.getSql().selectMaterial(that.schoolName, '口罩');
      that.disinfectant = await SQL.getSql().selectMaterial(that.schoolName, '消毒水');
      that.suit = await SQL.getSql().selectMaterial(that.schoolName, '防护服');
    },
    async selectAllMaterial(){
      this.preventionWorkersAll = await SQL.getSql().selectAllMaterial('防疫人员');
      this.maskAll = await SQL.getSql().selectAllMaterial('口罩');
      this.disinfectantAll = await SQL.getSql().selectAllMaterial('消毒水');
      this.suitAll= await SQL.getSql().selectAllMaterial('防护服');
    }
  }
}
</script>

<style scoped>
button {
  width: 60px;
  height: 26px;
  letter-spacing: 1px;
  background-color: #fffb;
  border-radius: 8px;
}

.adminpage {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.top {
  width: 100%;
  height: 80px;
  background-color: #eee;
  box-sizing: border-box;
  border-bottom: 2px solid #2c3e50;
}

.topbar {
  min-width: 1280px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topbar img {
  height: 32px;
}

.topbar-l {
  width: auto;
  padding: 10px;
  color: #2c3e50;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
  opacity: 0.8;
}

.topbar-l:hover {
  opacity: 1;
}

.topbar-l-hover {
  opacity: 1;
}

.topbar-l::after {
  content: '';
  width: 80%;
  height: 3px;
  border-radius: 2px;
  background-color: #fffb;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.topbar-l:hover::after {
  animation: underline 0.8s forwards ease;
}

@keyframes underline {
  from {
    width: 0%;
    background-color: #2c3e50;
  }
  to {
    width: 70%;
    background-color: #030e1a;
  }
}

.content {
  width: 100%;
  min-width: 1280px;
  min-height: 820px;
  position: absolute;
  top: 80px;
  bottom: 0;
}

/* 时钟组件 */
.content .clock {
  width: 380px;
  height: 320px;
  border-radius: 0 12px 12px 0;
  background-color: rgba(44, 62, 80, 0.95);
  position: absolute;
  top: 60px;
  left: -30px;
  z-index: 10;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  transform: skewX(-3deg) translateX(-288px);
  transition: 1s;
}

.content .clock:hover {
  transform: skewX(-3deg) translateX(0);
}

.content .onclock {
  transform: skewX(-3deg) translateX(0);
}

/* 数据上报 */
.content .report {
  width: 72%;
  height: 700px;
  border: 2px solid #fffd;
  color: #fffd;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1px;
  position: fixed;
  left: 50%;
  top: 150px;
  margin-left: -38%;
  padding: 40px;
  border-radius: 20px;
  z-index: 12;
  background-color: rgba(44, 62, 80, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3),
  0 0 120px rgba(105, 159, 221, 0.1) inset;
  opacity: 0;
  visibility: hidden;
  transition: 0.8s;

}

.content .onreport {
  opacity: 1;
  visibility: visible;
}

/* 人员分配组件 */
.content .people {
  width: 280px;
  height: 380px;
  padding: 20px 0 20px 100px;
  color: #fffd;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1px;
  border-radius: 0 12px 12px 0;
  background-color: rgba(44, 62, 80, 0.95);
  position: absolute;
  top: 420px;
  left: -30px;
  z-index: 10;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  transform: skewX(-3deg) translateX(-308px);
  transition: 1s;
}

.content .people:hover {
  transform: skewX(-3deg) translateX(-20px);
}

.content .onpeople {
  transform: skewX(-3deg) translateX(-20px);
}

.content .people span {
  color: #ee1414ee;
  font-weight: 600;
}

/* 物资分配组件 */
.content .materials {
  width: 280px;
  height: 680px;
  padding: 30px 80px 20px 66px;
  color: #fffd;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1px;
  border-radius: 12px 0 0 12px;
  background-color: rgba(44, 62, 80, 0.95);
  position: absolute;
  top: 60px;
  right: -30px;
  z-index: 10;
  box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.3);
  transform: skewX(3deg) translateX(350px);
  transition: 1s;
}

.content .materials:hover {
  transform: skew(3deg) translateX(0);
}

.content .onmaterials {
  transform: skew(3deg) translateX(0);
}

.content .materials button {
  float: right;
}

.content .materials span {
  color: #ee1414ee;
  font-weight: 600;
}

/* 主内容区域 */
.content .main {
  width: 1280px;
  height: 780px;
  margin: 112px auto 0;
  position: relative;
  z-index: 1;
}

/* 学校信息区域 */
.levelGreen {
  width: 46px;
  height: 26px;
  position: absolute;
  top: 34px;
  background-color: green;
  display: inline-block;
  opacity: 0.75;
}

.levelYellow {
  width: 46px;
  height: 26px;
  position: absolute;
  top: 34px;
  background-color: yellow;
  display: inline-block;
  opacity: 0.75;
}

.levelRed {
  width: 46px;
  height: 26px;
  position: absolute;
  top: 34px;
  background-color: red;
  display: inline-block;
  opacity: 0.75;
}

.content .main .school-01 {
  width: 648px;
  height: 280px;
  position: absolute;
  top: -66px;
  left: -106px;
  backdrop-filter: blur(6px);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: 0.8s;
}

.onschool01 {
  opacity: 1 !important;
  visibility: visible !important;
}

.content .main .school-02 {
  width: 648px;
  height: 280px;
  position: absolute;
  top: -76px;
  left: 700px;
  backdrop-filter: blur(6px);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: 0.8s;
}

.onschool02 {
  opacity: 1 !important;
  visibility: visible !important;
}

.content .main .school-03 {
  width: 648px;
  height: 280px;
  position: absolute;
  top: 472px;
  left: -100px;
  backdrop-filter: blur(6px);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: 0.8s;
}

.onschool03 {
  opacity: 1 !important;
  visibility: visible !important;
}

.content .main .school-04 {
  width: 648px;
  height: 280px;
  position: absolute;
  top: 480px;
  left: 726px;
  backdrop-filter: blur(6px);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: 0.8s;
}

.onschool04 {
  opacity: 1 !important;
  visibility: visible !important;
}

.content .main .school-01 .school-text,.school-02 .school-text,.school-03 .school-text,.school-04 .school-text {
  width: 648px;
  height: 280px;
  padding: 30px 40px;
  box-sizing: border-box;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 32px;
  color: #fff;
  position: absolute;
  z-index: 7;
}

.content .main .school-01 .bg-img {
  width: 680px;
  position: absolute;
  top: -20px;
  left: -14px;
  z-index: 6;
}

.content .main .school-02 .bg-img {
  width: 680px;
  position: absolute;
  top: -20px;
  left: -14px;
  z-index: 6;
}

.content .main .school-03 .bg-img {
  width: 680px;
  position: absolute;
  top: -20px;
  left: -14px;
  z-index: 6;
}

.content .main .school-04 .bg-img {
  width: 680px;
  position: absolute;
  top: -20px;
  left: -14px;
  z-index: 6;
}

.content .main .palce-img {
  width: 42px;
  z-index: 4;
  opacity: 0;
  animation: place 1s forwards ease;
  animation-delay: 1.8s;
  cursor: pointer;
}

@keyframes place {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.content .main .icon-img {
  width: 56px;
  height: 56px;
  position: fixed;
  bottom: 30px;
  right: 80px;
  transition: 0.2s;
  opacity: 0.6;
  cursor: pointer;
}

.content .main .icon-img:hover {
  opacity: 1;
}

.content .main .main-bg {
  width: 1280px;
  height: 780px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  animation: content-img 2s forwards ease;
}

@keyframes content-img {
  from {
    width: 1100px;
    height: 600px;
    transform: rotate(-5deg);
  }
  to {
    transform: rotateX(60deg) rotateY(5deg) rotateZ(-15deg);
  }
}

/* 时钟样式 */
svg {
  position: absolute;
  top: 10%;
  width: 100%;
  height: 80%;
  transform: skewX(4deg);
}

path {
  stroke: #09151b;
  stroke-linecap: round;
  stroke-width: 42;
  fill: none;
}

#sec {
  stroke: #6f7f24;
  stroke-width: 20;
}

#min {
  stroke: #3d601b;
  stroke-width: 38;
}

#hour {
  stroke: #13441e;
  stroke-width: 38;
}
</style>